<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_事件监听</title>
</head>
<body>
    <button onclick="alert('点击了按钮1')">按钮1</button>
    <button id="btn">按钮2</button>
    <hr>
    <h4>今天星期三</h4>
    <span>震惊:最强台风来袭...</span>
    <h4>明天星期四</h4>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque delectus doloribus ducimus ea id
            minus saepe. Asperiores aut eveniet modi quaerat qui repellat repudiandae sequi voluptates? Id, libero,
            voluptas.
        </div>
        <div>Ab, adipisci, architecto cumque distinctio dolore dolorem dolores ducimus esse natus, quos voluptate
            voluptatibus? Ad, dignissimos distinctio ipsa maiores modi officia praesentium sapiente tempore voluptatem.
            Facere itaque nesciunt quos repellendus!
        </div>
        <div>Ab accusamus, aliquam asperiores blanditiis cum dolorem dolores eum in incidunt laboriosam, magnam, maxime
            perspiciatis qui quisquam quo repellat repellendus rerum sit ullam veritatis! Alias aspernatur laudantium
            quas vero voluptas.
        </div>
        <div>Alias amet animi, aspernatur atque, corporis dolores enim harum nam non, reiciendis totam veniam
            voluptatibus. Atque culpa cum doloremque ex fugiat incidunt iusto laboriosam, ratione repellat sequi sit
            totam unde.
        </div>
        <div>Accusamus, ad autem consequatur, doloremque ducimus fuga illum, inventore labore maiores quibusdam quisquam
            sint ullam vero vitae voluptatem! Eos eveniet fuga possimus quos repellat reprehenderit. Alias dignissimos
            facere molestias nihil?
        </div>
        <div>Accusantium corporis eligendi ex illum inventore maxime natus nemo nesciunt placeat provident quam quas
            quis, rem rerum ut? Assumenda, autem consectetur dolorum fugiat illo ipsa optio quaerat totam. Consequatur,
            perferendis!
        </div>
        <div>Ab ad aspernatur assumenda debitis dolorum eius possimus quis quo repudiandae vero. Architecto enim natus
            voluptate. At cum cumque exercitationem illo in, molestias optio porro quaerat quasi quis, quo vitae.
        </div>
        <div>Adipisci atque commodi deleniti doloremque id itaque iusto, maxime nemo nesciunt non officia praesentium
            quae quaerat recusandae sapiente sint sit totam ullam veritatis voluptatibus? Deserunt distinctio eum ipsum
            quae soluta?
        </div>
        <div>A ab animi, delectus dolores eaque est id itaque, laudantium modi natus neque nesciunt non nostrum odit
            officia omnis pariatur quia quidem quis recusandae reiciendis sed tempore, totam unde velit?
        </div>
        <div>At commodi cum excepturi, id obcaecati quae ratione ullam? Autem, doloribus ea laudantium molestias omnis
            pariatur ut. Aspernatur cumque deserunt eveniet maiores molestias odio, omnis optio placeat tenetur ullam
            vitae!
        </div>
        <div>A aspernatur autem commodi distinctio dolor doloremque ducimus earum eligendi, eos error eum hic magnam
            maiores maxime minima modi nisi nobis quibusdam quisquam recusandae sunt vel voluptates! Architecto, ducimus
            sunt!
        </div>
        <div>Cumque delectus dicta, dignissimos enim in ipsam iure odit quo sapiente tempore? Ab iste reprehenderit
            veniam? Accusantium atque consequatur cum ea minima neque quis tenetur vero! Dicta error quo reprehenderit?
        </div>
        <div>Animi cum, illum labore libero magni neque quod. Architecto deserunt dolores inventore laborum libero,
            magni voluptatum. Eligendi ex fuga iure labore laboriosam laborum, molestias mollitia, nostrum officiis
            praesentium quasi, sequi.
        </div>
        <div>Alias aliquid animi aperiam commodi excepturi fugit in ipsam iure molestias, nisi quam reprehenderit
            repudiandae sint. Delectus dolore doloremque facere laborum minus nihil quidem repudiandae rerum sapiente
            suscipit voluptates, voluptatum!
        </div>
        <div>Aliquam aperiam aspernatur atque beatae commodi consectetur cumque eos error fuga id maiores obcaecati
            officia qui ratione temporibus, tenetur voluptates voluptatum. Assumenda eaque ex incidunt neque nihil omnis
            praesentium voluptate.
        </div>
        <div>A ab accusamus accusantium aspernatur aut beatae corporis dolorem doloribus ea eveniet facere maxime modi
            molestiae neque, odio, quae quasi quia, quod recusandae reiciendis sapiente tempore ullam vel veritatis
            vero?
        </div>
        <div>Accusantium alias autem cumque, deleniti doloremque explicabo illo ratione repellat repellendus
            reprehenderit sequi sint soluta ut. Aliquam aperiam, corporis cumque debitis doloribus expedita ipsum,
            laborum, nesciunt omnis pariatur tempora voluptatibus!
        </div>
        <div>Accusamus atque ducimus eaque facilis iure perferendis porro. Aliquam at debitis dolor, dolore dolorem fuga
            ipsa ipsam labore magni placeat quasi recusandae repellendus totam. Consectetur iure neque saepe soluta vel?
        </div>
        <div>Accusantium dolores incidunt, iste officiis quidem repellendus voluptate! Dolor eius exercitationem fuga
            necessitatibus praesentium velit veniam voluptatum! Autem eligendi ipsa minima mollitia natus neque
            repudiandae similique tenetur vero. Aut, natus?
        </div>
        <div>Amet aperiam, doloremque iure labore natus nostrum possimus tempora tempore veniam vitae. Enim iure magnam
            nihil qui similique sit voluptatem voluptatum? Distinctio dolore, eaque eos facilis in molestiae sed
            voluptas!
        </div>
        <div>Atque laborum laudantium nobis quasi recusandae vero? At ducimus ea error et fugiat in laborum minus
            molestiae odio ratione reiciendis sit, veritatis voluptate voluptatibus voluptatum! Accusamus dolores id
            labore nulla.
        </div>
        <div>Culpa delectus eveniet facilis inventore ipsum itaque minus modi nulla odio placeat, quae quasi qui quis,
            saepe tenetur? Architecto dolore expedita maiores, necessitatibus nobis nostrum obcaecati pariatur provident
            rerum sapiente?
        </div>
        <div>A atque commodi cupiditate dolore ea exercitationem, facere id inventore ipsum libero natus nulla officia
            officiis quae recusandae, sunt unde vitae voluptate voluptates voluptatibus! Accusamus animi aspernatur nisi
            nostrum temporibus.
        </div>
        <div>Delectus dolores impedit inventore itaque iure labore minima, omnis quaerat tempore. Ad aliquid doloremque
            dolorum esse ex laboriosam libero molestiae nam nostrum officiis perferendis possimus quasi totam, ullam
            unde. Aliquid!
        </div>
        <div>Aliquid cumque iure labore nemo odit ratione, repudiandae suscipit ullam ut voluptatum. Accusantium,
            aliquid at doloremque eaque, earum, explicabo hic id nihil nostrum placeat quae quia quidem vel veniam
            vitae.
        </div>
        <div>Assumenda cum eveniet excepturi fugit in libero modi necessitatibus nostrum quidem ratione, ullam ut veniam
            vero, vitae voluptate? Ab exercitationem hic in ipsa ipsam ipsum molestiae molestias obcaecati odit
            voluptate?
        </div>
        <div>Accusamus asperiores at cumque dolore ea eaque earum esse et excepturi iure magnam, minima minus molestiae
            nihil praesentium quidem quos reprehenderit sed unde voluptatum! Doloremque eveniet ex nihil sapiente
            tempora!
        </div>
        <div>Dolore eos facere minima quod. Atque, blanditiis consequuntur corporis debitis dolores et ex, expedita hic
            iure libero odit vel voluptates! Ducimus labore laudantium vero. Impedit perspiciatis quaerat quis
            similique. Inventore?
        </div>
        <div>Adipisci alias animi at atque corporis, delectus earum enim fuga fugiat fugit in incidunt labore minima
            modi molestiae molestias nesciunt non numquam odio officiis placeat provident quas quidem quis tempora!
        </div>
        <div>Ad amet beatae cum dolorum ducimus earum eum excepturi illo itaque libero maxime molestias neque nobis
            provident quae qui quia quidem quo, quos rerum saepe sequi veniam vero? Exercitationem, explicabo!
        </div>
        <div>Accusamus asperiores deleniti dicta ducimus ex, inventore ipsam magnam minus non ratione repellendus saepe
            sint veritatis? Ad enim nemo quasi sit ut! Aperiam incidunt maxime molestiae necessitatibus quos repudiandae
            ullam.
        </div>
        <div>Dolore ex illum ipsam! Animi cupiditate ducimus ea eos exercitationem in neque quidem ratione rerum saepe.
            Consectetur, doloremque, enim exercitationem facere itaque labore minima minus nisi perferendis repellendus
            saepe, sit.
        </div>
        <div>Ab accusantium, adipisci aliquam consequatur dolor ducimus eaque, eligendi expedita illo inventore itaque
            iure laudantium magnam necessitatibus nesciunt optio perferendis perspiciatis placeat quaerat quia quibusdam
            sed sit ut vel voluptatem.
        </div>
        <div>Aliquam culpa dolorem eos exercitationem libero odit quia, veritatis voluptatibus. Aut et illo quo rerum?
            Animi doloremque ducimus iste laborum minima molestiae quas veniam! Deleniti hic iure omnis pariatur vero.
        </div>
        <div>Ad hic sit voluptatem? Aliquam atque deleniti dolorem exercitationem expedita inventore mollitia
            perferendis, rem saepe sapiente tenetur voluptatibus. Accusamus ad culpa doloribus fugiat, incidunt minus
            nisi omnis unde veniam voluptatem!
        </div>
        <div>Ab commodi enim expedita fuga molestias, nihil non! Aut cum, debitis enim necessitatibus sint temporibus
            veniam. Consequuntur dolorum ducimus laboriosam maxime necessitatibus non tempora! Autem itaque magni odit
            reiciendis rem?
        </div>
        <div>Cumque explicabo fugit modi nisi placeat quod, sequi similique tempore voluptas voluptatem! A alias
            blanditiis, delectus dolores eaque est explicabo hic illum iste modi natus provident rem reprehenderit sint,
            ut?
        </div>
        <div>Accusantium aliquid amet cum dignissimos distinctio eum, eveniet facere impedit iure, laborum, maxime
            numquam obcaecati quae quas repellendus reprehenderit vel voluptate. Amet animi doloremque est fuga harum
            mollitia rem voluptates.
        </div>
        <div>Aliquid, animi commodi consectetur dignissimos eligendi ex facere illum ipsam minus, molestiae natus quidem
            rem rerum tempora, temporibus ut veritatis vero voluptates. Dicta fugiat minus quam, quia recusandae rem
            veniam?
        </div>
        <div>Ad adipisci aperiam corporis culpa cumque dolor dolore ducimus earum expedita fugit impedit laboriosam
            magni maiores necessitatibus neque, nihil odit, porro quidem quo quos ratione repellat saepe similique
            soluta sunt!
        </div>
        <div>Accusamus architecto cupiditate earum eveniet id, libero quos tenetur voluptatum. Aliquid architecto at et
            modi molestiae? Accusamus amet delectus, dicta esse eveniet hic ipsa iure molestias nostrum pariatur quas
            voluptatibus?
        </div>
        <div>Consequatur cum dolorem illo molestias quidem. Corporis dolor dolore iusto laudantium maxime mollitia
            pariatur quia quo repudiandae sapiente? Excepturi iure molestias nam, porro praesentium quae. Culpa deleniti
            et numquam rem?
        </div>
        <div>Animi dignissimos dolorem doloremque, ea eveniet illum laudantium maxime, odit perspiciatis quae quam
            repellendus unde! Assumenda delectus eligendi, enim est expedita fuga inventore molestiae molestias omnis
            porro quam quasi quisquam.
        </div>
        <div>Cum ea eaque ullam vero? Atque consectetur fuga, fugiat hic magni nostrum odio quam repudiandae tempora
            totam? A adipisci cum excepturi facere harum itaque laborum mollitia necessitatibus suscipit, vitae
            voluptas.
        </div>
        <div>Aut culpa delectus dignissimos earum incidunt nobis quos? Architecto cumque, hic id odio repellat saepe.
            Accusantium autem debitis distinctio eos fugiat nam natus quaerat sequi suscipit unde. Ea, quas, quod?
        </div>
        <div>Deleniti esse illo quasi? Adipisci illum officia tenetur ullam voluptatum? Asperiores at cumque expedita
            ipsa ipsam laboriosam magnam minus molestiae molestias, natus numquam obcaecati optio reprehenderit sapiente
            soluta veniam voluptate.
        </div>
        <div>Amet assumenda earum expedita facere laborum magni necessitatibus tenetur! Esse est nam nesciunt quo
            repellat temporibus voluptas! Beatae enim laboriosam quo reiciendis sed. Et ipsa labore quis vitae? Modi,
            neque.
        </div>
        <div>Aperiam consequatur, rem! Architecto at delectus dignissimos doloribus enim laboriosam magnam magni maxime
            odio odit, officiis omnis porro quas quasi quis quos reprehenderit repudiandae unde! Aliquam doloremque
            dolorum fugit tempora.
        </div>
        <div>Aspernatur assumenda explicabo omnis quibusdam tempore. Dolore obcaecati quod saepe similique unde
            voluptates voluptatibus! Consequuntur culpa explicabo fuga, nostrum pariatur praesentium quae quam, quos
            recusandae rem suscipit tempore vitae voluptatibus!
        </div>
        <div>Ad amet architecto at blanditiis cupiditate debitis dolorem doloremque ea eos esse incidunt ipsa ipsum
            laudantium necessitatibus nihil, officia officiis optio provident reiciendis repellendus sed tempora
            temporibus tenetur velit voluptates.
        </div></div>

    <script>
        let btnE=document.getElementById('btn');
        btnE.addEventListener('click',function () {
            alert('点击了按钮2')
        })

        let spanE=document.querySelector('span')
        spanE.addEventListener('mouseover',function () {
            console.log('该标题被查看了')
        })

        window.addEventListener('scroll',function () {
            console.log('页面被滚动了')
        })
        window.addEventListener('resize',function () {
            console.log('页面被调整了')
        })
    </script>
</body>
</html>